<template>
  <div class="nav">
      <div class="nav-item" :class="{active: props.index === 0}" @click="toPath('/')">
          <div class="icon"></div>
          <div class="text">首页</div>
      </div>
      <div class="nav-item" :class="{active: props.index === 1}" @click="toPath('/user/index')">
          <div class="icon"></div>
          <div class="text">人员</div>
      </div>
      <div class="nav-item" :class="{active: props.index === 2}" @click="toPath('/cloud-disk/index')">
          <div class="icon"></div>
          <div class="text">云盘</div>
      </div>
      <div class="nav-item" :class="{active: props.index === 3}" @click="toPath('/doc/index')">
          <div class="icon"></div>
          <div class="text">知识库</div>
      </div>
      <div class="nav-item" :class="{active: props.index === 4}" @click="toPath('/more/index')">
          <div class="icon"></div>
          <div class="text">更多</div>
      </div>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router';
  const router = useRouter()
  const props = defineProps({
    index: Number
  })
  const toPath = (path) => {
    router.push({
      path
    })
  }
</script>

<style lang="scss" scoped>
  .nav{
      z-index: 999;
      box-shadow: 0 3px 15px 0 var(--primary);
      width: 100%;
      position: fixed;
      top: 0;
      height: 68px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: var(--primary);
      user-select: none;
      .nav-item{
          cursor: pointer;
          color: #fff;
          height: 80%;
          padding: 0 20px;
          display: flex;
          align-items: center;
          transition: all .2s;
          margin: 0 5px;
          .icon{
              width: 25px;
              height: 25px;
              border-radius: 999px;
              background: #eeeeee;
              margin-right: 10px;
          }
          .text{
              font-size: 18px;
          }
      }
      .nav-item:hover,.nav-item.active{
          background: #fff;
          border-radius: 5px;
          .icon{
              background-color: var(--primary);
          }
          .text{
              color: var(--primary);
              font-weight: bolder;
          }
      }
  }
</style>